<template>
  <div>
    <div id="top1">
      <el-container>
        <el-header>
          <p>
            <span class="title">今日销售额</span> 菜品库存超出:0 菜品库存过低:0
          </p>
        </el-header>
        <el-main id="sale">
          <div class="red">
            <p>0.00</p>
            今日总营收(元)
          </div>
          <div class="yellow">
            <p>0.00</p>
            今日优惠金额(元)
          </div>
          <div class="blue">
            <p>0.00</p>
            今日订单数
          </div>
          <div class="green">
            <p>0.00</p>
            今日退款金额(元)
          </div>
        </el-main>
      </el-container>
    </div>
    <div id="top2">
      <el-container>
        <el-header>
          <p><span class="title">营业动态</span></p>
        </el-header>
        <el-main>
          堂食订单(就餐中)
          <el-progress
            :percentage="50"
            :format="format"
            color="rgb(255,102,0)"
          ></el-progress>
          外卖订单(进行中)
          <el-progress
            :percentage="50"
            :format="format"
            color="rgb(255,102,0)"
          ></el-progress>
          当前预约人数
          <el-progress
            :percentage="50"
            :format="format"
            color="rgb(255,102,0)"
          ></el-progress>
          当前排号人数
          <el-progress
            :percentage="50"
            :format="format"
            color="rgb(255,102,0)"
          ></el-progress>
          <el-progress
            type="circle"
            :percentage="70"
            status="success"
            width="80px"
            color="rgb(16,163,255)"
            id="circle"
            >总营收</el-progress
          >
        </el-main>
      </el-container>
    </div>

    <!-- 下面的表格 -->
    <div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column label="今日菜品销售排行榜" id="tit">
          <el-table-column
            prop="dishId"
            label="菜品编号"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dishName"
            label="菜品名称"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column prop="price" label="单价" width="150" align="center">
          </el-table-column>
          <el-table-column
            prop="saleNumber"
            label="销售笔数"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="salePrice"
            label="销售金额"
            width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="discount"
            label="折扣额度"
            width="150"
            align="center"
          ></el-table-column>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="100"
          layout="prev, pager, next, jumper"
          :total="1000"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
#top1,
#top2 {
  width: 600px;
  border: 2px solid rgb(242, 242, 242);
  float: left;
}
#top1 {
  margin-right: 20px;
}
#sale > div {
  width: 200px;
  height: 150px;
  float: left;
  text-align: center;
  margin: 20px;
}
.title {
  font-size: 25px;
  margin-right: 150px;
  color: rgb(102, 102, 102);
}
.red {
  background-color: rgb(255, 0, 0);
}
.yellow {
  background-color: rgb(255, 153, 0);
}
.blue {
  background-color: rgb(26, 165, 255);
}
.green {
  background-color: rgb(102, 204, 204);
}
#sale p {
  margin-top: 30px;
  font-size: 40px;
}

.el-header {
  background-color: rgb(242, 242, 242);
  color: rgb(51, 51, 51);
  text-align: center;
  line-height: 60px;
}
#circle {
  margin-top: 20px;
}
.el-progress {
  width: 80%;
}
.el-main {
  padding: 20px;
}
#tit{
  font-size: 20px;
}

</style>
<script>
export default {
  data: function () {
    return {
      tableData: [
        {
          dishId: "001",
          dishName: "小炒肉",
          price: 18,
          saleNumber: 10,
          salePrice: 180,
          discount: 30,
        },
        {
          dishId: "002",
          dishName: "西红柿炒鸡蛋",
          price: 12,
          saleNumber: 5,
          salePrice: 60,
          discount: 5,
        },
      ],
      currentPage: 5,
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}`;
    },
  },
};
</script>